<template>
    <div class="foot">
      <div
        v-for="(item, index) in footMenu"
        :class="{ 'foot-item': true, 'foot-active': index === current }"
        :key="item.icon"
      >
        <router-link :to="item.to">
          <div class="iconfont" v-html="item.icon" />
          <div class="foot-text">{{ item.text }}</div>
        </router-link>
      </div>
    </div>
  </template>
  
  <script setup>
    const footMenu = [
      { icon: '&#xe6bb;', text: '首页', to: { path: '/home' } },
      { icon: '&#xe698;', text: '购物车', to: { path: '/cart' } },
      { icon: '&#xe603;', text: '订单', to: { path: '/order' } },
      { icon: '&#xe7d5;', text: '我的', to: { path: '/my' } }
    ]
    defineProps({
        current: {
            type: Number,  // 明确指定数字类型
            required: true
        }
    })
  </script>
  
  <style lang="scss" scoped>
    @import '@/style/iconfont.css';
    .foot {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 4.9rem;
      border-top: 0.1rem solid #f1f1f1;
      &-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        .iconfont {
          display: inline-block;
          font-size: 1.8rem;
        }
        .foot-text {
          font-size: 1.2rem;
        }
      }
      &-active {
        color: #1fa4fc;
      }
    }
  </style>
  